<template>
    <div class="assemblyWarp">
        <el-tabs tab-position="left" v-model="activeName" @tab-change="tabChange">
            <el-tab-pane v-for="item in paneList" :key="item.key" :label="item.label" :name="item.key">
                <div class="paneWarp" v-if="activeName==item.key">
                    <component :is="item.component"></component>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import paneList from './paneJson';

const activeName = ref('1')

onMounted(() => {
})

const tabChange = (name) => {
    activeName.value = name;
}
</script>

<style lang="less" scoped>
.assemblyWarp {
    width: 100%;
    height: 100%;
    .el-tabs{
        height: 100%;
    }
    .paneWarp{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: auto;
        position: relative;
    }

    .el-tabs--right .el-tabs__content,
    .el-tabs--left .el-tabs__content {
        height: 100%;
    }
    /deep/.el-tabs__content{
        height: 100%;
    }
    /deep/.el-tab-pane{
        height: 100%;
    }
}
</style>